<template>
    <div class="main-banner">
        <h1 class="text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">智能转换,快且安全</h1>
        <div class="des">
            支持多种格式互相转换，支持图片、视频、音频、文档等格式转换，支持批量上传文件,安全纯净快速，<br/>打造极致的在线文件转换体验。
        </div>
        <div class="tool">
            <button class="btn btn-base px-6 text-sm btn-custom rounded-full">开始试用</button>
        </div>
    </div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
    .main-banner {
        padding: 60px 0px;
        margin: 0px auto;
        text-align: center;
        h1{
            font-size: 3.75rem;
            line-height: 1.25!important;
            unicode-bidi: isolate;
            font-weight: 800;
            margin-bottom: 1.5rem;
            display:block;
            overflow-wrap: break-word;
            word-break: break-word;
            margin-bottom: 40px;
        }
        .des{
            line-height: 1.8;
        }
        .tool{
            margin: 20px 0;
            display: flex;
            justify-content: center;
            button{
                margin-left: 10px;
                &:first-child{
                    margin-left: 0;
                }
            }
            .banner_btn{
                width: 10rem;
                font-size: 1rem;
                font-weight: 500;
                line-height: 1.5;
            }
        }
    }
</style>